<template>
  <a-modal
    :title="`图片查看`"
    :width="840"
    :visible="visible"
    :confirmLoading="loading"
    :footer="null"
    :destroyOnClose="true"
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <a-carousel arrows>
        <!-- <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px; z-index: 100">
          <a-icon type="left-circle" />
        </div>
        <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
          <a-icon type="right-circle" />
        </div> -->
        <a slot="customPaging" slot-scope="props" class="custom-paging">
           <img :src="`${list[props.i]}`" :alt="props">
        </a>
        <div v-for="(it,index) in list" :key="index" class="img-wrap">
            <img :src="`${it}`" :alt="it">
        </div>
      </a-carousel>
    </a-spin>
  </a-modal>
</template>

<script>
import {Carousel} from 'ant-design-vue'
import { mapGetters } from 'vuex'
// 表单字段
const fields = ['id', 'name']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    'a-carousel': Carousel
  },
  data() {
    return {}
  },
  created() {},
  methods: {},
  computed: {
    ...mapGetters({baseUrl: 'baseUrl'})
  },
}
</script>

<style scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 400px;
  text-align: center;
  line-height: 160px;
  /* background: #364d79; */
  overflow: hidden;
}
.custom-paging img{
    width:50px;
    height: 30px;
}
.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide img {
  max-width: 100%;
  max-height: 380px;
  text-align: center;
}
.ant-carousel >>> .slick-dots li{
    opacity: .5;
    border: 2px solid transparent;
}
.ant-carousel >>> .slick-dots .slick-active{
    opacity: 1;
    border-color:#1890ff;
}
.img-wrap{
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 380px;
}
</style>
